<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="sort-title">
          <el-button type="primary" size="mini" @click="addClient">添加客户</el-button>
          <el-input
            v-model="name_contains"
            suffix-icon="el-icon-s-order"
            placeholder="请输入关键字"
            class="input-with-select"
          >
            <el-select slot="prepend" v-model="agent" placeholder="请选择">
              <el-option label="全部经纪" value="" />
              <el-option v-for="item in economicList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-button slot="append" @click="btnSearch">筛选</el-button>
          </el-input>
        </div>
        <el-divider />
        <div class="sort-content">
          <el-table border :data="clientList" style="width: 100%">
            <el-table-column align="center" label="图片">
              <template #default="{ row }">
                <img
                  v-fixImg="require('@/assets/common/head.jpg')"
                  style="width: 100px; height: 100px"
                  :src="row.image"
                >
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称" width="180" />
            <el-table-column align="center" prop="email" label="邮箱" />
            <el-table-column align="center" prop="phone" label="电话" />
            <el-table-column align="center" prop="agent.name" label="经纪" />
            <el-table-column align="center" prop="wechat" label="微信" />
            <el-table-column align="center" prop="desc" label="介绍" />
            <el-table-column align="center" label="操作">
              <template #default="{row}">
                <el-button type="primary" size="mini" @click="editClient(row.id)">编辑</el-button>
                <el-button type="danger" size="mini" @click="delClient(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :current-page="currentPage"
            style="text-align: center"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="clientData._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
          <!-- 弹窗 -->
          <el-dialog
            :title="clientForm.id ? '编辑客户' : '添加客户'"
            :visible="isShowDialog"
            @close="btnCanCel"
          >
            <el-form ref="clientForm" :rules="rules" :model="clientForm">
              <el-form-item label="经纪" label-width="60px">
                <el-select v-model="clientForm.agent" placeholder="请选择">
                  <el-option v-for="item in economicList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="姓名" prop="name" label-width="60px">
                <el-input v-model="clientForm.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="邮箱" label-width="60px">
                <el-input v-model="clientForm.email" autocomplete="off" />
              </el-form-item>
              <el-form-item label="电话" label-width="60px">
                <el-input v-model="clientForm.phone" autocomplete="off" />
              </el-form-item>
              <el-form-item label="地址" label-width="60px">
                <el-input v-model="clientForm.address" autocomplete="off" />
              </el-form-item>
              <el-form-item label="描述" prop="desc" label-width="60px">
                <el-input
                  v-model="clientForm.desc"
                  resize="none"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </el-form-item>
              <el-form-item label="封面" label-width="60px">
                <!-- 图片组件 -->
                <imageUpload ref="clientPhoto" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="btnCanCel">取 消</el-button>
              <el-button type="primary" @click="btnOk">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getclientList, getTotal, getClient, addClient, editClient, delClient } from '@/api/client'

import { getEconomicList } from '@/api/economic'
export default {
  data() {
    return {
      clientList: [],
      economicList: [],
      searchInput: '',
      selectVal: '',
      total: 0,
      currentPage: 1,
      clientData: {
        _limit: 5,
        _start: 0
      },
      name_contains: '',
      agent: '',
      clientForm: {
        id: '',
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      isShowDialog: false,
      rules: {
        name: [{ required: true, message: '该项不能为空!', trigger: 'blur' }],
        desc: [{ required: true, message: '该项不能为空!', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.economicList = await getEconomicList()
    this.getClientList()
  },
  methods: {
    async getClientList(data) {
      this.clientList = await getclientList({ ...this.clientData, ...data })
      this.total = await getTotal(data)
    },
    sizeChange(val) {
      this.clientData._limit = val
      this.getClientList()
    },
    currentChange(val) {
      this.clientData._start = (val - 1) * this.clientData._limit
      this.currentPage = val
      this.getClientList()
    },
    btnSearch() {
      this.clientData._start = 0
      if (!this.agent) {
        this.getClientList({ name_contains: this.name_contains })
      } else {
        this.getClientList({ name_contains: this.name_contains, agent: this.agent })
      }
    },
    addClient() {
      this.isShowDialog = true
    },
    async editClient(id) {
      this.isShowDialog = true
      const { agent, desc, email, name, phone, image, wechat } = await getClient(id)
      this.clientForm = {
        id,
        agent: agent.id,
        name,
        email,
        phone,
        wechat,
        desc
      }
      this.$refs.clientPhoto.fileList = [{ url: image }]
    },
    async delClient(id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delClient(id)
        this.$message.success({
          message: '删除成功!',
          center: true
        })
        // 当前页没数据时，页数后退1
        if (this.clientList.length === 1) {
          this.currentPage--
          this.clientData._start = (this.currentPage - 1) * this.clientData._limit
        }
        this.getClientList()
      } catch (error) {
        this.$message.info({
          message: '已取消删除!',
          center: true
        })
      }
    },
    async btnOk() {
      try {
        await this.$refs.clientForm.validate()
        if (!this.$refs.clientPhoto.fileList[0]) {
          this.$message.warning({
            message: '封面图片不能为空',
            center: true
          })
          return
        }
        if (this.$refs.clientPhoto.fileList[0].status !== 'success') {
          this.$message.warning({
            message: '请等待图片上传完成',
            center: true
          })
          return
        }
        this.clientForm.image = this.$refs.clientPhoto.fileList[0].url
        if (this.clientForm.id) {
          // 编辑
          await editClient(this.clientForm)
          this.$message.success({
            message: '编辑客户成功',
            center: true
          })
        } else {
          // 新增
          await addClient(this.clientForm)
          this.$message.success({
            message: '新增客户成功',
            center: true
          })

          this.currentPage = 1
          this.clientData._start = 0
        }

        this.getClientList()
        this.isShowDialog = false
      } catch (error) {
        return error
      }
    },
    btnCanCel() {
      this.clientForm = {
        id: '',
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''

      }
      this.$refs.clientPhoto.fileList = []
      this.$refs.clientForm.resetFields()
      this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .app-container {
   ::v-deep  .sort-title {
      display: flex;
      justify-content: space-between;
      .el-input-group {
        width: 45%;
      }
      .el-select .el-input {
        width: 120px;
      }
      .input-with-select .el-input-group__prepend {
        background-color: #fff;
      }
    }
  }
}
</style>
